CSS-Only Responsive Layout with Smooth Transitionsの使い方
- 下記ページの 「DOWNLOAD SOURCE」 よりファイル1式をダウンロード。
- ダウンロードしたファイルを任意の場所にコピー。
- 動作させるファイル(サンプルではindex.html)にコードを記述。
<パスは上記ファイル構成の場合なので環境にあわせて変更>
・head部分にcssファイルを読み込ませるためのコードを記述。<head> <!--GoogleFontを使用するためのコード--> <link href='http://fonts.googleapis.com/css?family=Josefin+Slab:400,700' rel='stylesheet' type='text/css'> <!--ダウンロードしたファイル--> <link rel="stylesheet" type="text/css" href="css/demo.css" /> </head>
サンプルのcssコード(サンプルのcssは改変しています)
/*ページ設定部分(style.cssなどで設定していれば削除する)*/ body { font-family: Georgia, serif; background: #ddd; font-weight: 400; font-size: 15px; color: #333; overflow: hidden; -webkit-font-smoothing: antialiased; } a { color: #555; text-decoration: none; } /*ここまでページ設定部分*/ /*ここからCSS-Only Responsive Layout with Smooth Transitionsの設定*/ @font-face { font-family: 'RaphaelIcons'; src: url('raphaelicons-webfont.eot'); src: local('☺'), url('fonts/raphaelicons-webfont.woff') format('woff'), url('fonts/raphaelicons-webfont.ttf') format('truetype'), url('fonts/raphaelicons-webfont.svgwebfontKOf9F4sx') format('svg'); font-weight: normal; font-style: normal; } .st-container { position: absolute; width: 100%; height: 100%; top: 0; left: 0; font-family: 'Josefin Slab', 'Myriad Pro', Arial, sans-serif; } .st-container > input, .st-container > a { position: fixed; bottom: 0px; width: 20%; cursor: pointer; font-size: 16px; height: 34px; line-height: 34px; } .st-container > input { opacity: 0; z-index: 1000; } .st-container > a { z-index: 10; font-weight: 700; background: #e23a6e; color: #fff; text-align: center; text-shadow: 1px 1px 1px rgba(151,24,64,0.2); } /* "Fix" for percentage rounding: add a background bar pseudo element with the same color like the labels */ .st-container:before { content: ''; position: fixed; width: 100%; height: 34px; background: #e23a6e; z-index: 9; bottom: 0; } #st-control-1, #st-control-1 + a { left: 0; } #st-control-2, #st-control-2 + a { left: 20%; } #st-control-3, #st-control-3 + a { left: 40%; } #st-control-4, #st-control-4 + a { left: 60%; } #st-control-5, #st-control-5 + a { left: 80%; } .st-container > input:checked + a, .st-container > input:checked:hover + a { background: #821134; } .st-container > input:checked + a:after, .st-container > input:checked:hover + a:after { bottom: 100%; border: solid transparent; content: ''; height: 0; width: 0; position: absolute; pointer-events: none; border-bottom-color: #821134; border-width: 20px; left: 50%; margin-left: -20px; } .st-container > input:hover + a { background: #AD244F; } .st-container > input:hover + a:after { border-bottom-color: #AD244F; } .st-scroll, .st-panel { position: relative; width: 100%; height: 100%; } .st-scroll { top: 0; left: 0; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; /* Let's enforce some hardware acceleration */ -webkit-transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; } .st-panel { background: #fff; overflow: hidden; } #st-control-1:checked ~ .st-scroll { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -o-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } #st-control-2:checked ~ .st-scroll { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } #st-control-3:checked ~ .st-scroll { -webkit-transform: translateY(-200%); -moz-transform: translateY(-200%); -o-transform: translateY(-200%); -ms-transform: translateY(-200%); transform: translateY(-200%); } #st-control-4:checked ~ .st-scroll { -webkit-transform: translateY(-300%); -moz-transform: translateY(-300%); -o-transform: translateY(-300%); -ms-transform: translateY(-300%); transform: translateY(-300%); } #st-control-5:checked ~ .st-scroll { -webkit-transform: translateY(-400%); -moz-transform: translateY(-400%); -o-transform: translateY(-400%); -ms-transform: translateY(-400%); transform: translateY(-400%); } /* Content elements */ .st-deco { width: 200px; height: 200px; position: absolute; top: 0px; left: 50%; margin-left: -100px; background: #fa96b5; -webkit-transform: translateY(-50%) rotate(45deg); -moz-transform: translateY(-50%) rotate(45deg); -o-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); } [data-icon]:after { content: attr(data-icon); font-family: 'RaphaelIcons'; color: #fff; text-shadow: 1px 1px 1px rgba(151,24,64,0.2); position: absolute; width: 200px; height: 200px; line-height: 200px; text-align: center; font-size: 90px; top: 50%; left: 50%; margin: -100px 0 0 -100px; -webkit-transform: rotate(-45deg) translateY(25%); -moz-transform: rotate(-45deg) translateY(25%); -o-transform: rotate(-45deg) translateY(25%); -ms-transform: rotate(-45deg) translateY(25%); transform: rotate(-45deg) translateY(25%); } .st-panel h2 { color: #e23a6e; text-shadow: 1px 1px 1px rgba(151,24,64,0.2); position: absolute; font-size: 54px; font-weight: 900; width: 80%; left: 10%; text-align: center; line-height: 50px; margin: -70px 0 0 0; padding: 0; top: 50%; -webkit-backface-visibility: hidden; } #st-control-1:checked ~ .st-scroll #st-panel-1 h2, #st-control-2:checked ~ .st-scroll #st-panel-2 h2, #st-control-3:checked ~ .st-scroll #st-panel-3 h2, #st-control-4:checked ~ .st-scroll #st-panel-4 h2, #st-control-5:checked ~ .st-scroll #st-panel-5 h2 { -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards; -moz-animation: moveDown 0.6s ease-in-out 0.2s backwards; -o-animation: moveDown 0.6s ease-in-out 0.2s backwards; -ms-animation: moveDown 0.6s ease-in-out 0.2s backwards; animation: moveDown 0.6s ease-in-out 0.2s backwards; } @-webkit-keyframes moveDown { 0% { -webkit-transform: translateY(-40px); opacity: 0; } 100% { -webkit-transform: translateY(0px); opacity: 1; } } @-moz-keyframes moveDown { 0% { -moz-transform: translateY(-40px); opacity: 0; } 100% { -moz-transform: translateY(0px); opacity: 1; } } @-o-keyframes moveDown { 0% { -o-transform: translateY(-40px); opacity: 0; } 100% { -o-transform: translateY(0px); opacity: 1; } } @-ms-keyframes moveDown { 0% { -ms-transform: translateY(-40px); opacity: 0; } 100% { -ms-transform: translateY(0px); opacity: 1; } } @keyframes moveDown { 0% { transform: translateY(-40px); opacity: 0; } 100% { transform: translateY(0px); opacity: 1; } } .st-panel p { position: absolute; text-align: center; font-size: 16px; line-height: 22px; color: #8b8b8b; z-index: 2; padding: 0; width: 50%; left: 25%; top: 50%; margin: 10px 0 0 0; -webkit-backface-visibility: hidden; } #st-control-1:checked ~ .st-scroll #st-panel-1 p, #st-control-2:checked ~ .st-scroll #st-panel-2 p, #st-control-3:checked ~ .st-scroll #st-panel-3 p, #st-control-4:checked ~ .st-scroll #st-panel-4 p, #st-control-5:checked ~ .st-scroll #st-panel-5 p { -webkit-animation: moveUp 0.6s ease-in-out 0.2s backwards; -moz-animation: moveUp 0.6s ease-in-out 0.2s backwards; -o-animation: moveUp 0.6s ease-in-out 0.2s backwards; -ms-animation: moveUp 0.6s ease-in-out 0.2s backwards; animation: moveUp 0.6s ease-in-out 0.2s backwards; } @-webkit-keyframes moveUp { 0% { -webkit-transform: translateY(40px); opacity: 0; } 100% { -webkit-transform: translateY(0px); opacity: 1; } } @-moz-keyframes moveUp { 0% { -moz-transform: translateY(40px); opacity: 0; } 100% { -moz-transform: translateY(0px); opacity: 1; } } @-o-keyframes moveUp { 0% { -o-transform: translateY(40px); opacity: 0; } 100% { -o-transform: translateY(0px); opacity: 1; } } @-ms-keyframes moveUp { 0% { -ms-transform: translateY(40px); opacity: 0; } 100% { -ms-transform: translateY(0px); opacity: 1; } } @keyframes moveUp { 0% { transform: translateY(40px); opacity: 0; } 100% { transform: translateY(0px); opacity: 1; } } /* Colored sections */ .st-color, .st-deco { background: #fa96b5; } .st-color [data-icon]:after { color: #fa96b5; } .st-color .st-deco { background: #fff; } .st-color h2 { color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.1); } .st-color p { color: #fff; color: rgba(255,255,255,0.8); } @media screen and (max-width: 520px) { .st-panel h2 { font-size: 42px; } .st-panel p { width: 90%; left: 5%; margin-top: 0; } .st-container > a { font-size: 13px; } } @media screen and (max-width: 360px) { .st-container > a { font-size: 10px; } .st-deco { width: 120px; height: 120px; margin-left: -60px; } [data-icon]:after { font-size: 60px; -webkit-transform: rotate(-45deg) translateY(15%); -moz-transform: rotate(-45deg) translateY(15%); -o-transform: rotate(-45deg) translateY(15%); -ms-transform: rotate(-45deg) translateY(15%); transform: rotate(-45deg) translateY(15%); } }
・<body></body>内にコードを記述<div class="container"> <div class="st-container"> <input type="radio" name="radio-set" checked="checked" id="st-control-1"/> <a href="#st-panel-1">Serendipity</a> <input type="radio" name="radio-set" id="st-control-2"/> <a href="#st-panel-2">Happiness</a> <input type="radio" name="radio-set" id="st-control-3"/> <a href="#st-panel-3">Tranquillity</a> <input type="radio" name="radio-set" id="st-control-4"/> <a href="#st-panel-4">Positivity</a> <input type="radio" name="radio-set" id="st-control-5"/> <a href="#st-panel-5">Passion</a> <div class="st-scroll"> <!-- Placeholder text from http://hipsteripsum.me/ --> <section class="st-panel" id="st-panel-1"> <div class="st-deco" data-icon="H"> </div> <h2>Serendipity</h2> <p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p> </section> <section class="st-panel st-color" id="st-panel-2"> <div class="st-deco" data-icon="2"> </div> <h2>Happiness</h2> <p>Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.</p> </section> <section class="st-panel" id="st-panel-3"> <div class="st-deco" data-icon="B"> </div> <h2>Tranquillity</h2> <p>Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.</p> </section> <section class="st-panel st-color" id="st-panel-4"> <div class="st-deco" data-icon="x"> </div> <h2>Positivity</h2> <p>Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.</p> </section> <section class="st-panel" id="st-panel-5"> <div class="st-deco" data-icon="Ç"> </div> <h2>Passion</h2> <p>Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.</p> </section> </div> </div> </div>
サンプルのhtmlコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>CSS-Only Responsive Layout with Smooth Transitions</title> <link href='http://fonts.googleapis.com/css?family=Josefin+Slab:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="css/demo.css" /> </head> <body> <div class="container"> <div class="st-container"> <input type="radio" name="radio-set" checked="checked" id="st-control-1"/> <a href="#st-panel-1">Serendipity</a> <input type="radio" name="radio-set" id="st-control-2"/> <a href="#st-panel-2">Happiness</a> <input type="radio" name="radio-set" id="st-control-3"/> <a href="#st-panel-3">Tranquillity</a> <input type="radio" name="radio-set" id="st-control-4"/> <a href="#st-panel-4">Positivity</a> <input type="radio" name="radio-set" id="st-control-5"/> <a href="#st-panel-5">Passion</a> <div class="st-scroll"> <!-- Placeholder text from http://hipsteripsum.me/ --> <section class="st-panel" id="st-panel-1"> <div class="st-deco" data-icon="H"> </div> <h2>Serendipity</h2> <p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p> </section> <section class="st-panel st-color" id="st-panel-2"> <div class="st-deco" data-icon="2"> </div> <h2>Happiness</h2> <p>Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.</p> </section> <section class="st-panel" id="st-panel-3"> <div class="st-deco" data-icon="B"> </div> <h2>Tranquillity</h2> <p>Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.</p> </section> <section class="st-panel st-color" id="st-panel-4"> <div class="st-deco" data-icon="x"> </div> <h2>Positivity</h2> <p>Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.</p> </section> <section class="st-panel" id="st-panel-5"> <div class="st-deco" data-icon="Ç"> </div> <h2>Passion</h2> <p>Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.</p> </section> </div> </div> </div> </body> </html>
- ファイル1式をサーバーにアップロードして設置完了。